<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <script src="./jQuerymini.js"></script>
</head>

<body style="padding: 20px;">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="bookName" placeholder="请输入">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="author" placeholder="请输入">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="publisher" placeholder="请输入">
            </div>
            <button id="btnAdd" class="btn btn-primary">添加</button>
        </div>
    </div>
    <!-- 图书表格 -->

    <table class="table table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
    <script>
        //获取数据
        $(function () {
            function getbookList() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res)
                    if (res.status == '200') {
                        console.log(res)
                        var mydata = [];
                        $.each(res.data, function (i, item) {
                            mydata.push('<tr> <td>' + item.id + '</td> <td>' + item.bookname +
                                '</td><td>' + item.author + '</td><td>' + item.publisher +
                                '</td><td><a href="javascript:;" class="del" data-id="' +
                                item
                                .id + '">删除</a></td></tr>');
                        })
                        $('#tb').empty().append(mydata.join(''))
                    } else {
                        alert('获取数据失败')
                    }


                })
            }
            getbookList();
            // 删除数据，采用代理方式
            $('tbody').on('click', '.del', function () {
                var id = this.attr('data-id');
                console.log('ok');
                $.get('http://www.liulongbin.top:3006/api/delbook', {
                    id: id
                }, function (res) {
                    if (res.status != '200') {
                        alert('删除图书失败')
                    }
                    getbookList();
                })
            })
            // 添加数据
            $('#btnAdd').on('click', function (res) {
                var name = $('#bookName').val().trim();
                var author = $('#author').val().trim();
                var publisher = $('#publisher').val().trim();
                if (name.length <= 0 || author.length <= 0 || publisher.length <= 0) {
                    alert('请填写完整的图书信息');
                } else {
                    $.post('http://www.liulongbin.top:3006/api/addbook', {
                        bookname: name,
                        author: author,
                        publisher: publisher
                    }, function (res) {
                        if (res.status != '201') {
                            console.log(res);
                            alert('添加失败')
                        } else {
                            alert('添加成功')
                        }
                    })
                }
            })
        })
    </script>
</body>

</html>